<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      /*后代选择器*/
      h1 b {
        color: mediumaquamarine;
      }

      /*儿子选择器*/
      h1 > strong {
        color: aqua;
      }

      /*兄弟选择器*/
      ul li + li + li {
        list-style-type: square;
        color: aquamarine;
      }
      ul li:first-child {
        color: pink;
      }
      /*并列关系*/
      h1 b,
      ul li:first-child {
        font: 40px 楷体;
      }
    </style>
  </head>
  <body>
    <h1>
      <strong>关系1</strong><span><b>关系2</b></span>
    </h1>

    <ul>
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
      <li>li4</li>
      <li>li5</li>
    </ul>
  </body>
</html>
